<form class="layui-form seller-form"  action="" >
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">角色名称：</label>
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="name" lay-verify="title" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
	        <div class="layui-input-block">
	            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="*"><i class="iconfont icon-chaxun"></i>筛选</button>
                <button class="layui-btn layui-btn-sm" lay-submit  lay-filter="role-add"><i class="layui-icon">&#xe608;</i>添加</button>
	        </div>
        </div>
    </div>
</form>

<div class="table-body">
    <table id="userTable" lay-filter="test"></table>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate','table'], function(){
        var userTables =layui.table.render({
            elem: '#userTable',
            height: 'full-330',
            cellMinWidth: '80',
            page: 'true',
            limit:'20',
            url: "{:url('role/index')}?_ajax=1",
            id:'userTable',
            cols: [[
                {type:'numbers'},
//                {field:'username', width:100,title:'账号'},
                {field:'name',title:'角色名称'},
                {field:'utime',title:'创建时间'},
                {field: 'operating', title: '操作', width:250, align: 'center', fixed: 'right',templet:function(data){
                    var html = '';
                    html += '<a  class="layui-btn layui-btn-xs option-perm" data-id="' + data.id + '">编辑权限</a>';
                    html += '<a  class="layui-btn layui-btn-xs option-del layui-btn-primary" data-id="' + data.id + '">删除</a>';
                    return html;
                }},
            ]]
        });
        layui.form.on('submit(*)', function(data){
            layui.table.reload('userTable', {
                where: data.field
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //监听form提交  (add)
        layui.form.on('submit(role-add)',function(data){
            $.ajax({
                type:'get',
                url: "{:url('role/add')}",
                success:function(e){
                    window.box = layer.open({
                        type: 1,
                        content: e,
                        area: ['400px', '300px'],
                        title:'添加角色',
                        btn: ['确定','取消'],
                        yes: function(index, layero){
                            if($('#edit_name').val() != ''){
                                //保存支付方式
                                $.ajax({
                                    type:'post',
                                    url: "{:url('role/add')}",
                                    data: $('#edit_form').serialize(),
                                    success:function(res){
                                        if(res.status){
                                            layer.close(index);
                                            layer.msg(res.msg,{time:1300},function(){
                                                userTables.reload();
                                            });
                                        }else{
                                            layer.msg(res.msg);
                                        }
                                    }
                                });
                            }else{
                                layer.msg('请输入角色名称');
                            }


                        }
                    });
                }
            });
            return false;
        });

        //角色删除
        $(document).on('click','.option-del',function(){
            var id = $(this).attr('data-id');
            layer.confirm('您确定删除此角色吗？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                //去删除
                JsPost("{:url('role/del')}",{'id':id},function(res){
                    if(res.status){
                        layer.msg('删除成功');
                        userTables.reload();
                    }else{
                        layer.msg(res.msg);
                    }

                });
            }, function(){
                layer.close(1);
            });
        });

        //设置权限
        $(document).on('click','.option-perm',function(){
            var id = $(this).attr('data-id');

            JsPost('{:url("role/getOperation")}',{'id':id},function (res) {
                if(res.status){
                    layer.open({
                        type: 1,
                        area: ['400px', '600px'],
                        data:'',
                        title: '配置权限',
                        content: res.data,
                        btn:['保存','关闭'],
                        yes:function (index,layero) {
                            var thedata = getAllChecked();
                            JsPost('{:url("role/savePerm")}',{'id':id,'data':thedata},function (re) {
                                if(re.status){
                                    layer.msg('保存成功');
                                    layer.close(index);
                                }else{
                                    layer.msg(re.msg);
                                }
                            });
                        }
                    });
                }else{
                    layer.msg(res.msg);
                }

            });
        });

    });
</script>
